<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面跨域-test1</title>

    <style type="text/css">
        #box {
            width: 80px;
            height: 40px;
            background: #fd7430;
            border: none;
            border-radius: 5px;
            outline: none;
            color: #fff;
        }

        .div-container {
            position: fixed;
            top: 0%;
            width: 100%;
            height: 100%;
            z-index: 200;
            background: rgba(0, 0, 0, 0.5) !important;
            /* 兼容ie几不知道，好像ie5 */
            background: #000;
            filter: Alpha(opacity=60);
        }

        /*设置div-child的父元素主要是将要此元素的父元素透明特性继承过来，故div-child不会半透明，而是不透明，解决了父元素透明，子元素也透明的bug */
        .div-child-container {
            position: relative;
            width: 400px;
            height: 200px;
            margin: auto;
            top: 30%;
            background: #fff;
            z-index: 250;
            /*z-index要放在父元素之上 */
        }

        .div-child {
            width: 400px;
            height: 200px;
            margin: auto;
            background: #fff;
            z-index: 300;
            /*z-index要放在父元素之上 */
            text-align: center;
        }

        .div-child span {
            position: relative;
            top: 40px;
        }

        .div-child .my-btn {
            margin-top: 80px;
        }

        .div-child .my-btn button {
            width: 80px;
            height: 40px;
            background: #fd7430;
            border: none;
            border-radius: 5px;
            color: #fff;
            outline: none;
        }

        .div-child .my-btn button:first-child() {
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <!-- 按钮 -->
    <button id="box" onclick="pop_box()">弹出框</button>
    <!-- 弹出模态框 -->
    <div class="div-container" id="div-container" style="display: none;">
        <div class="div-child-container">
            <div class="div-child">
                <span>hhhhh</span>
                <div class="my-btn">
                    <button id="cancleBtn" onclick="cancle()">取消</button>
                    <button id="confrim" onclick="confrim()">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /*按钮弹出模态框*/
        function pop_box() {
            var container = document.getElementById('div-container');
            container.style.display = "block";
        }

        /*取消事件*/
        function cancle() {
            var container = document.getElementById('div-container');
            container.style.display = "none";
        }

        /*确认事件，因为现在没有确认事件，就将弹出框隐藏*/
        function confrim() {
            var container = document.getElementById('div-container');
            container.style.display = "none";
        }
    </script>
</body>

</html>